<!--顶部菜单导航条-->
<script>
import MainSearch from "@/components/Search/MainSearch.vue";
import BananaIcon from "@/components/icons/BananaIcon.vue";
import ShoppingIcon from "@/components/icons/ShoppingIcon.vue";
import MessageIcon from "@/components/icons/MessageIcon.vue";
import PrivateLetter from "@/components/icons/PrivateLetter.vue";
import SubmitIcon from "@/components/icons/SubmitIcon.vue";
import LoginButton from "@/components/buttons/LoginButton.vue";
import MiniSizeIcon from "@/components/icons/system/MiniSizeIcon.vue";
import MaxSizeIcon from "@/components/icons/system/MaxSizeIcon.vue";
import CloseIcon from "@/components/icons/system/CloseIcon.vue";
//窗体用
import { ipcApiRoute } from '@/api/main';
import { ipc } from '@/utils/ipcRenderer';
import { toRaw } from 'vue';

export default {
  name: "TopMenu",
  components: {
    CloseIcon,
    MaxSizeIcon,
    MiniSizeIcon,
    LoginButton,
    SubmitIcon,
    PrivateLetter,
    MessageIcon,
    ShoppingIcon,
    BananaIcon,
    MainSearch
  },
  data() {
    return {

    }
  },
  methods: {
    login() {
      let viewContent = {
        type: 'vue',
        content: '#/user/login',
        windowName: 'window-ipc',
        windowTitle: '蕉点用户登录',
        width:560,
        height:500,
      }
      ipc.invoke(ipcApiRoute.createWindow, toRaw(viewContent)).then(r => {
        console.log(r);
      })
    },
  }
}
</script>

<template>
  <div class="menu drag">
    <div class="top-box"></div>
    <div class="logo">
      <img src="../../assets/logo-32.png" alt="">
    </div>
    <div class="search">
      <MainSearch/>
    </div>
    <div class="right-box">
      <div class="item-menu no-drag">
        <banana-icon class="icon"></banana-icon>
        <p>充蕉币</p>
      </div>
      <div class="item-menu no-drag">
        <shopping-icon class="icon"></shopping-icon>
        <p>商场</p>
      </div>
      <div class="item-menu no-drag">
        <message-icon class="icon"></message-icon>
        <p>通知</p>
      </div>
      <div class="item-menu no-drag">
        <private-letter class="icon"></private-letter>
        <p>私信</p>
      </div>
      <div class="item-menu no-drag">
        <submit-icon class="icon"></submit-icon>
        <p>投稿</p>
      </div>
      <login-button class="no-drag" @click="login"></login-button>
      <div class="top-box-right no-drag">
        <close-icon class="system-icon"></close-icon>
        <max-size-icon class="system-icon"></max-size-icon>
        <mini-size-icon class="system-icon"></mini-size-icon>
      </div>
    </div>
  </div>
</template>

<style scoped>
.menu{
  width: 100%;
  height: 65px;
  background: transparent;
}
.top-box{
  width: 100%;
  height: 20px;
}
.top-box-right{
  height: 25px;
  width: 100px;
  position: absolute;
  top: 30px;
  right: 10px;
}
.system-icon{
  cursor: pointer;
  float: right;
  margin-right: 10px;
  margin-top: 5px;
}
.logo{
  width: 160px;
  height: 65px;
  display: flex;
  align-items: center;
  justify-content: center;
  float: left;
}
.logo img{
  width: 70%;
}
.search{
  width: calc(100% - 160px - 31% - 7%);
  height: 65px;
  float: left;
  padding: 7px;
}
.right-box{
  width: calc(40% - 160px);
  height: 65px;
  float: left;
}
.item-menu{
  width: 50px;
  height: 60px;
  padding-top: 5px;
  cursor: pointer;
  float: left;
}
.icon{
  width: 20px;
  height: 20px;
}
.item-menu p{
  color: white;
  font-size: 0.8rem;
}
.item-menu:hover p{
  color: #eaec11;
}

</style>
